<!-- <!DOCTYPE html> -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="../../static/css/style_admain.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../static/js/admain/jquery/jquery.1.11.2.min.js"></script>
    <!-- 数据统计部分 -->
    <script type="text/javascript" src="../static/js/admain/jsapi.js"></script>
    <script type="text/javascript" src="../static/js/admain/format+zh_CN,default,corechart.I.js"></script>
    <script type="text/javascript" src="../static/js/admain/jquery/jquery.gvChart-1.0.1.min.js"></script>
</head>

<body>

<div class="mainbox">
    <!-- 整个左边部分 -->
    <div class="mainleft">
        <div class="leftinfo">
            <div class="listtitle">
                <a href="#" class="more1">更多</a>数据统计
            </div>
            <div class="maintj">
                <table id='myTable5'>
                    <caption>鱼种数量占比</caption>
                    <thead>
                        <tr>
                            <th>yyyyyy</th>
                            <th>A类鱼</th>
                            <th>B类鱼</th>
                            <th>C类鱼</th>
                            <th>D类鱼</th>
                            <th>E类鱼</th>
                            <th>F类鱼</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>2010</th>
                            <td>125</td>
                            <td>185</td>
                            <td>327</td>
                            <td>359</td>
                            <td>376</td>
                            <td>398</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <div class="leftinfos">
            <div class="infoleft">
                <div class="listtitle"><a href="#" class="more1">更多</a>设备信息</div>
                <ul class="newlist">
                    <li><a href="#">水底摄像头</a><b>video-1 H264 4Mb</b></li>
                    <li><a href="#">水底摄像头</a><b>video-2 4CIF 128kb</b></li>
                    <li><a href="#">水底摄像头</a><b>video-3 H264 100b</b></li>
                    <li><a href="#">云台</a><b>holder-1 H264 1kb</b></li>
                    <li><a href="#">声呐</a><b>sonar-1 CSV 10kb</b></li>
                    <li><a href="#">传感器</a><b>sensor-1 TXT 2kb</b></li>
                    <li><a href="#">气象站</a><b>menteor-1 TXT 500b</b></li>
                </ul>
            </div>
            <div class="inforight">
                <div class="listtitle"><a href="#" class="more1">添加</a>常用工具</div>
                <ul class="tooli">
                    <li><span><img src="../../static/img/admain/d01.png"/></span><p><a href="#">信息资料</a></p></li>
                    <li><span><img src="../../static/img/admain/d02.png"/></span><p><a href="#">编辑</a></p></li>
                    <li><span><img src="../../static/img/admain/d03.png"/></span><p><a href="#">记事本</a></p></li>
                    <li><span><img src="../../static/img/admain/d04.png"/></span><p><a href="#">任务日历</a></p></li>
                    <li><span><img src="../../static/img/admain/d05.png"/></span><p><a href="#">图片管理</a></p></li>
                    <li><span><img src="../../static/img/admain/d06.png"/></span><p><a href="#">交易</a></p></li>
                    <li><span><img src="../../static/img/admain/d07.png"/></span><p><a href="#">档案袋</a></p></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 整个右边部分 -->
    <div class="mainright">
        <div class="dflist">
            <div class="listtitle"><a href="#" class="more1">更多</a>硬件信息</div>
            <ul class="newlist">
                <li><a href="#">网箱长度：100m</a></li>
                <li><a href="#">网箱宽度：50m</a></li>
                <li><a href="#">网箱深度：30m</a></li>
                <li><a href="#">网箱经度：128.034</a></li>
                <li><a href="#">网箱纬度：56.123</a></li>
                <li><a href="#">水底传感器运行时间：24天13小时43分钟</a></li>
                <li><a href="#">下次检修：35天后</a></li>
                <li><a href="#">保修过期：2035年02月01日</a></li>
            </ul>
        </div>
        <div class="dflist1">
            <div class="listtitle"><a href="#" class="more1">更多</a>信息统计</div>
            <ul class="newlist">
                <li><i>数据库：</a></i>MySQL,HBase</li>
                <li><i>查询次数：</a></i>554600</li>
                <li><i>成功次数：</a></i>554600</li>
                <li><i>查询时间：</a></i>0.1s</li>
            </ul>
        </div>
    </div>
</div>


</body>
<script type="text/javascript">
    $(function(){
        //饼图部分代码
        gvChartInit();
        $('#myTable5').gvChart({
            chartType: 'PieChart',
            gvSettings: {
                vAxis: {title: 'No of players'},
                hAxis: {title: 'Month'},
                width: 650,
                height: 250
            }
        });
        //监听窗口变动
        setWidth();
        $(window).resize(function () {
            setWidth();
        });
        function setWidth() {
            var width = ($('.leftinfos').width() - 12) / 2;
            $('.infoleft,.inforight').width(width);
        }

    });
</script>
</html>
